<template>
  <div class="page-container">
    <div class="card-wrapper" v-for="(item, index) in model" :key="index">
      <div class="title">{{ item.title }}</div>
      <div class="content-wrapper border-top">
        <div class="topic" v-if="item.topic">{{ item.topic }}</div>
        <div class="content" v-for="(el, i) in item.content" :key="i">
          <div class="text">{{ el }}</div>
        </div>
      </div>
      <div class="btn-wrapper border-top" v-if="item.btn">
        <a-button type="primary" @click="goTo(item.url, item.item, item.permission)">{{ item.btn }}</a-button>
      </div>
    </div>
  </div>
</template>

<script setup name="Tbox">
  import { reactive } from 'vue'
  import useNavigate from '@/hooks/useNavigate'
  const { navigateTo } = useNavigate()
  import { usePermission } from '@/hooks/usePermission'
  import { Message } from '@arco-design/web-vue'

  const model = reactive([
    {
      title: '1 - 车辆信息同步',
      topic: '请您悉知：',
      content: [
        '1、让系统能使用车载BOX需要安装师傅完成实际安装后再把车载BOX号码与车牌号绑定，但有前提；',
        '2、前提是：您要把车辆信息通过“同步”操作推送到师傅的操作设备中。',
      ],
      btn: '进入【车辆信息同步】',
      url: '/value-added/etc/car-info',
      item: 'carInfo',
      permission: 'svms:asstes:equipment:car-info',
    },
    {
      title: '2 - 使用车载BOX',
      topic: '',
      content: ['开/关车门、断电供电、断油供油、鸣笛闪灯、车窗开/关等。'],
      btn: '进入【车载BOX设备查看】',
      url: '/value-added/etc/hrhc-car',
      item: 'car',
      permission: 'svms:asstes:equipment:hrhc-tbox',
    },
    {
      title: '3 - 给您的用户下发远程虚拟车钥匙',
      topic: '',
      content: [
        '1、安装了车载BOX的车辆，相关租车订单会自动下发控车短信给您的用户；',
        '2、短信链接【爱车钥匙】小程序，能让用户实现手机开/关车门、鸣笛闪灯、寻车等操作；',
        '3、用户在小程序里点“取车”不受门店围栏限制，点“还车”必须是还车门店3公里范围内；这两个操作只影响小程序，不影响后台订单状态。',
      ],
      btn: '',
    },
    {
      title: '4 - 重新下发车钥匙',
      topic: '意外状况处理：',
      content: [
        '1、用户会不小心在小程序里提前结束了远程虚拟车钥匙的使用；',
        '2、您可以通过租车订单，点击按钮“重新下发车钥匙”，重新使用户拥有该能力。',
      ],
      btn: '',
    },
  ])
  const goTo = (url, item, permission) => {
    if (url) {
      if (item == 'carInfo' && usePermission(permission)) {
        navigateTo(url)
      } else if (item == 'car' && usePermission(permission)) {
        navigateTo(url + '/car', '车辆列表')
      } else {
        Message.warning(`您没有访问该页面的权限 `)
      }
    }
  }
</script>

<style lang="less" scoped>
  .page-container {
    padding-bottom: 0;
    .card-wrapper {
      margin-bottom: 20px;
      .title {
        font-weight: 500;
        font-size: 16px;
        color: #1d2129;
        line-height: 24px;
        padding: 12px 20px;
        background: #f2f3f5;
      }
      .border-top {
        border: 1px solid #e5e6eb;
        border-top: none;
      }
      .content-wrapper {
        padding: 20px;

        .topic {
          font-weight: 500;
          font-size: 14px;
          color: #1d2129;
          line-height: 22px;
          margin-bottom: 8px;
        }
        .text {
          font-weight: 400;
          font-size: 14px;
          color: #1d2129;
          line-height: 22px;
        }
      }
      .btn-wrapper {
        padding: 16px 20px;
        text-align: right;
      }
    }
  }
</style>
